<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      label-width="150px"
      label-position="left"
      v-loading="formLoading"
    >
      <template v-for="(item, index) in formData.list || []" :key="item.id">
        <el-form-item
          :label="item.examineName"
          :prop="`list.${index}.approveList`"
          :rules="formRules.approveList"
        >
          <span class="mr-8">审批人</span>
          <el-select
            clearable
            multiple
            :disabled="item.enableApproval"
            v-model="item.approveList"
            placeholder="请选择"
            class="!w-400px mr-8"
          >
            <el-option
              v-for="user in userList || []"
              :key="user.id"
              :label="user.nickname"
              :value="user.id"
            />
          </el-select>
          <el-checkbox
            v-if="item.examineType !== 'markTarget'"
            v-model="item.enableApproval"
            @change="checkChange($event, index)"
            >自动审批</el-checkbox
          >
        </el-form-item>
      </template>
    </el-form>
    <div class="mt-20">
      <el-button
        @click="submitForm"
        type="primary"
        :disabled="formLoading"
        v-hasPermi="['bid:examineSetting:batchUpdate']"
        >确 定</el-button
      >
      <el-button @click="reset()">重置</el-button>
    </div>
  </ContentWrap>
</template>
<script lang="ts" setup name="approvalConfig">
import * as approval from '@/api/approval'
import { cloneDeep } from 'lodash-es'
const formRef = ref()
const { t } = useI18n()
const message = useMessage()
const formLoading = ref(false)
const formData: Record<string, any> = ref({
  list: []
})
const checkMap = reactive({
  0: true,
  1: false
})
const userList: Record<string, any> = ref([])

const formRules = reactive({
  approveList: [{ required: true, message: '审批人不能为空', trigger: 'change' }]
})

const checkChange = (event, index) => {
  if (event) {
    formRef.value.clearValidate([`list.${index}.approveList`])
  }
}

const submitForm = async () => {
  try {
    formLoading.value = true
    if (!formRef) return
    const validateFieldList = formData.value.list.map((e, v) => {
      if (e.enableApproval) {
        return
      } else {
        return `list.${v}.approveList`
      }
    })
    const valid = await formRef.value.validateField(validateFieldList)
    if (!valid) return
    const data = cloneDeep(formData.value.list || []).map((e) => {
      e.approve = e.approveList.join(',')
      e.enableApproval = e.enableApproval ? 0 : 1
      delete e.approveList
      return e
    })
    await approval.batchUpdate(data)
    message.success(t('common.operateSuccess'))
  } catch {
  } finally {
    formLoading.value = false
  }
}

const reset = async () => {
  formData.value.list = []
  await examineSettingPage()
  formRef.value?.resetFields()
}

onMounted(async () => {
  try {
    formLoading.value = true
    await listAllSimple()
    await examineSettingPage()
    formRef.value?.resetFields()
  } finally {
    formLoading.value = false
  }
})

const listAllSimple = async () => {
  userList.value = await approval.listAllSimple()
}

const examineSettingPage = async () => {
  const { list } = await approval.examineSettingPage()
  formData.value.list = list.map((e) => {
    e.enableApproval = checkMap[e.enableApproval]
    return e
  })
}
</script>
